<template>
	<view class="box">
		<view class="addr">
			<navigator url="/pages/city/index" hover-class="navigator-hover">
				<view class="uni-icon">&#xe66a;</view> {{city}}
			</navigator>
		</view>
		<view class="serach">
			<navigator url="/pages/search/index" hover-class="navigator-hover" v-if="!edit">
				<view class="uni-icon">
					&#xe600;
				</view>
				<input type="text" value="" placeholder="活动从搜索开始" :disabled="!edit" />
			</navigator>
			<view v-else>
				<view class="uni-icon">
					&#xe600;
				</view>
				<input type="text" value="" placeholder="活动从搜索开始" v-model="keyword" />
			</view>
		</view>
		<view class="so-btn" v-if="edit" @tap="soso()">
			搜索
		</view>
	</view>
</template>

<script>
	//test.vue 使用时：
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "AddrSearch",
		props: {
			edit: {
				type: Boolean,
				default: false
				// required: true
			},
			keyword: {
				type: String,
				default: ''
				// required: true
			}
		},
		data: function () {
			return {
				
			}
		},
		methods:{
			soso() {
				this.$emit('soso',this.keyword)
			}
		},
		computed: {
			// ...mapState(),
			city() {
				return this.$store.state.city.name
			}
		},
	}
</script>

<style scoped>
	.box {
		display: flex;
		padding: 20px;
		background: #fff;
	}

	.box .addr {
		width: auto;
		height: 65px;
		line-height: 72px;
		padding: 0 30px 0 10px;
	}

	.box .serach {
		flex: 1;
		position: relative;
	}

	.box .serach .uni-icon {
		position: absolute;
		top: 20px;
		left: 23px;
		width: 20px;
		height: 20px;
		color: #888;
		font-size: 28px;
	}

	.box .serach input {
		height: 65px;
		width: 100%;
		padding: 0 10px 0 65px;
		font-size: 25px;
		border-radius: 10px;
		box-sizing: border-box;
		background: #efefef;
		border: none;
		outline: none;
	}

	.box .so-btn {
		padding: 0 30px;
		color: #0099CC;
		height: 65px;
		line-height: 72px;
	}
</style>
